@charset "utf-8";

@media (min-width: 1281px) and (max-width: 1520px) {
  .products-content {
    .content-top {
      margin: 0 100px;
    }
    .filter-box {
      padding: 0 100px;
      .scrollTip {
        right: 100px;
      }
    }
    .type-box {
      margin: 0 100px 50px;
    }
    .pro-list {
      padding: 0 100px;
    }
    .pro-list-2 {
      padding: 0 100px;
    }
    .seo-key {
      margin: 0 100px;
    }
  }
  .pro-filter {
    right: 100px;
  }
}

@media (min-width: 1081px) and (max-width: 1280px) {
  .products-content {
    .content-top {
      margin: 0 50px;
    }
    .filter-box {
      padding: 0 50px;
      .scrollTip {
        right: 50px;
      }
    }
    .type-box {
      margin: 0 50px 50px;
    }
    .pro-list {
      padding: 0 50px;
    }
    .pro-list-2 {
      padding: 0 50px;
    }
    .seo-key {
      margin: 0 50px;
    }
  }
  .pro-filter {
    right: 50px;
  }
}

@media (min-width: 769px) and (max-width: 1080px) {
  .products-content {
    .content-top {
      margin: 0 25px;
    }
    .filter-box {
      padding: 0 25px;
      .scrollTip {
        right: 25px;
      }
    }
    .type-box {
      margin: 0 25px 50px;
    }
    .pro-list {
      padding: 0 25px;
    }
    .pro-list-2 {
      padding: 0 25px;
      li {
        .pro-info {
          padding: 40px 50px;
        }
      }
    }
    .seo-key {
      margin: 0 25px;
    }
  }
  .pro-filter {
    right: 25px;
  }
}

@media screen and (max-width: 768px) {
  .products-content {
    padding: vm(50) vm(50) 0;
    .content-top {
      margin: 0;
      height: 100px;
      display: flex;
      align-items: center;
      .pro-counts {
        display: none;
      }
      .pro-filter {
        display: inline-block;
        background: transparent;
        width: auto;
        height: auto;
        padding: 0;
        span {
          font-size: vm(30);
          color: #2B2B2B;
          font-weight: bold;
        }
        i {
          display: none;
        }
      }
    }
    .type-box {
      margin: 0 0 vm(50);
      h1 {
        display: block;
        height: vm(80);
        font-size: vm(36);
        line-height: vm(80);
      }
      p {
        line-height: 1.6em;
      }
    }
    .pro-list {
      margin-top: 0;
      padding: 0;
      .list-1 {
        width: 48%;
        min-width: 48%;
        max-width: 48%;
        margin-right: vm(16);
        margin-bottom: vm(40);
        &:nth-of-type(2n) {
          margin-right: 0;
        }
        .pro-img {
          height: vm(246);
          min-height: vm(246);
        }
        .pro-name {
          padding: 0 vm(20);
          min-height: 8vw;
          display: flex;
          justify-content: center;
          align-items: center;
          a {
            font-size: vm(24);
            line-height: vm(30);
          }
        }
        article {
          display: none;
        }
        span {
          margin: vm(20);
        }
      }
      .list-2.pro-checked {
        border-color: $mainColor;
      }
      .list-2 {
        border: 2px solid #eee;
        height: auto;
        width: 47%;
        min-width: 47%;
        max-width: 47%;
        margin-right: vm(10);
        margin-bottom: vm(40);
        flex-direction: column;
        &:nth-of-type(2n) {
          margin-right: 0;
        }
        .pro-img {
          width: auto;
          height: vm(246);
          min-height: vm(246);
          border: none;
        }
        .pro-info {
          padding: 0;
          background: #fff;
          .pro-name {
            margin-top: vm(10);
            padding: 0 vm(20);
            a {
              @include linef(2);
              font-size: vm(24);
              line-height: vm(24);
            }
          }
          article {
            display: none;
          }
          span {
            display: block;
            height: 1px;
            background: #eee;
            margin: vm(20);
          }
          .compare-action {
            left: 0;
            margin: vm(40) vm(20);
            height: vm(60);
            font-size: vm(24);
            justify-content: flex-start;
            align-items: center;
            width: auto;
            background-color: $mainColor;
            span {
              margin: 0;
              background: transparent;
              height: auto;
              color: #fff;
            }
          }
          .compare-action .compare-action-check+label {
            border-color: #fff;
          }
          .compare-action .compare-action-check:checked+label:before {
            color: #fff;
          }
        }
      }
    }
    .seo-key {
      margin: 0;
      .keywords {
        margin-top: vm(20);
        span {
          display: flex;
          flex-wrap: wrap;
        }
        a {
          display: inline-block;
          width: auto;
          padding: 0 vm(20);
          background: #ccc;
          border-radius: 999px;
          margin-right: vm(10);
          color: #2b2b2b;
          margin-bottom: vm(30);
        }
      }
    }
  }
}